<template>
    <div id="info">
        <div class="left"><img src="/static/Exhibition_img/radian.png" /></div>
        <div class="main-title">蓝调美交会</div>
        <div class="info-box">
            <div class="info-title">
                <div
                    class="title"
                    v-for="item in title"
                    :key="item.id"
                    @click="change(item.id)"
                    :class="isactive == item.id ? 'active' : ''"
                >
                    {{ item.floorall }}
                </div>
            </div>
            <div class="info-content">
                <div class="info-img">
                    <a-carousel autoplay>
                        <div v-for="item in infoimg" :key="item.id"><img :src="item.url" /></div>
                    </a-carousel>
                </div>
                <div class="info-text">
                    <p v-show="isText == item.id" v-for="item in infotext" :key="item.id">{{ item.floordesc }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'info',
    data() {
        return {
            title: [],
            infotext: [],
            isText: 1,
            isactive: 1,
            infoimg: [
                {
                    //轮播图
                    id: 1,
                    url: '/static/Exhibition_img/轮播图.png',
                },
                {
                    id: 2,
                    url: '/static/Exhibition_img/轮播图1.png',
                },
                {
                    id: 3,
                    url: '/static/Exhibition_img/轮播图2.png',
                },
                {
                    id: 4,
                    url: '/static/Exhibition_img/轮播图3.png',
                },
            ],
        }
    },
    props: {},
    mounted() {},
    created() {
        this.getTitle()
    },
    methods: {
        getTitle() {
            this.axios.get('/ltmjh/floordesc/list').then(({ result }) => {
                this.title = result
                this.infotext = result
            })
        },
        change(e) {
            this.isactive = e
            this.isText = e
            // console.log(e)
        },
    },
    watch: {},
}
</script>

<style lang="less" scoped>
//轮播图
.ant-carousel {
    border-radius: 10px;
    overflow: hidden;
    /deep/ .slick-slide {
        overflow: hidden;
    }
}
//轮播图按钮
.ant-carousel {
    /deep/ .slick-dots li {
        margin: 0 0.625rem;
        margin-top: -0.3125rem;
        border-radius: 10px;
        height: 0.375rem;
        background: #eee;
    }
}
.ant-carousel {
    /deep/ .slick-dots li button {
        height: 100%;
        border-radius: 10px;
        background: #7d98ce;
    }
}
#info {
    .left {
        position: absolute;
        bottom: 0;
        left: -3.7rem;
        font-size: none;
        width: 3.7rem;
        height: 100%;
        z-index: -1;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .main-title {
        color: white;
        width: 9.375rem;
        height: 2.1875rem;
        line-height: 2.1875rem;
        font-size: 1rem;
        padding-left: 1.25rem;
        border-radius: 50px;
        background-image: url('/static/Exhibition_img/title.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        margin: 0.625rem 0;
        margin-left: -1.3rem;
        overflow: hidden;
        z-index: 2;
    }
    .info-box {
        height: 80%;
        display: flex;
        .info-title {
            width: 40%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            .title {
                width: 9.375rem;
                height: 2.1875rem;
                line-height: 2.1875rem;
                font-size: 0.875rem;
                padding-left: 1.25rem;
                color: white;
                border-radius: 50px;
                background-image: url('/static/Exhibition_img/title_btn.png');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .title:nth-child(1) {
                margin-left: -5rem;
            }
            .title:nth-child(2) {
                margin-left: -6.875rem;
            }
            .title:nth-child(3) {
                margin-left: -5.625rem;
            }
            .title:nth-child(4) {
                margin-left: -1.875rem;
            }
            .active {
                background-image: url('/static/Exhibition_img/active.png');
            }
        }
        .info-content {
            width: 60%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .info-img {
                width: 14rem;
                // margin: 0 auto;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                }
            }
            .info-text {
                width: 14rem;
                height: 76px;
                overflow: auto;
                overflow-y: auto;
                // display: -webkit-box;
                // -webkit-box-orient: vertical;
                // -moz-box-orient: vertical;
                // -webkit-line-clamp: 4;
                // line-clamp: 4;
                // overflow: hidden;
                // margin: 0 auto;
                margin-top: 0.625rem;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                padding: 0 0.31rem;
                &::-webkit-scrollbar {
                    /*滚动条整体样式*/
                    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
                    height: 1px;
                }
                &::-webkit-scrollbar-thumb {
                    /*滚动条里面小方块*/
                    border-radius: 10px;
                    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    background: #999999;
                }
                &::-webkit-scrollbar-track {
                    /*滚动条里面轨道*/
                    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    border-radius: 10px;
                    background: #fff;
                }
                p {
                    color: white;
                    font-size: 0.75rem;
                    line-height: 1.2rem;
                    text-indent: 2em;
                    margin: 0;
                }
            }
        }
    }
}
</style>